<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>管理员界面</title>
    <link rel="stylesheet" href="../css/base.css">
    <style>
        .clearfix:after {
            visibility: hidden;
            clear: both;
            display: block;
            content: ".";
            height: 0
        }
        *{
            margin: 0;
            padding: 0;
        }
        .main {
            width: 1200px;
            margin: 0 auto;
        }
        body{
            color: #000;
        }
        .top {
            height: 50px;
            text-align: center;
            background-color: #66b5ff;
        }
        .top h2{
            font-size: 35px;
            font-weight: 400;
            line-height: 50px;
        }
        .bottom {
            width: 1200px;
        }
        .left {
            margin-top: 5px;
            width: 200px;
            height: 320px;
            background-color: #66b5ff;
            float:left;
        }
        .right {
            margin-top: 5px;
            width: 980px;
            height: 648px;
            background-color: #3dd5ff;
            float: right;
            padding: 20px;
        }
        ul li{
            display: block;
            width: 200px;
            height: 80px;
            background-color: #66b5ff;
            text-align: center;
            font-size: 18px;
            line-height: 80px;
            cursor: pointer;
        }
        .current {
            background-color: #3dd5ff;
        }
        .right {
            display: none;
        }
        .start,.end{
            width: 940px;
            height: 305px;
        }
        .start {
            border-bottom: #ccc solid 1px;
        }
        .end {
            border-top: #ccc solid 1px;
        }
        .start h2,.end h2 {
            text-align: center;
            font-size: 32px;
            font-weight: 400;
        }
        .start_info,.end_info{
            width: 400px;
            text-align: center;
            margin: 40px auto;
            padding: 20px;
        }
        .start_info div,.end_info div {
            margin-bottom: 15px;
            font-size: 25px;
        }
        .start_info input,.end_info input{
            font-size: 15px;
            height: 28px;
            padding: 5px;
        }
        .start_info Button,.end_info Button{
            font-size: 20px;
            width: 80px;
            height: 30px;

        }
        .factor {
            width: 100%;
        }
        .factor_left,.factor_right  {
            display: inline-block;
        }

        .factor_left div,.factor_right div {
            margin-bottom: 10px;
            font-size: 18px;
            padding: 5px;
        }
        .factor_left input,.factor_right input {
            height: 20px;
            margin: 0 5px;
            font-size: 15px;
        }
        .factor_left Button,.factor_right Button {
            font-size: 14px;
            width: 50px;
            height: 20px;
            line-height: 20px;
            margin-left: 10px;
        }
        .play {
            width: 100%;
            height: 460px;
            background-color: #fff;
            margin-top: 10px;
            overflow: auto;
        }

        table {
            border-collapse: collapse;
            margin: 0 auto;
            text-align: center;
        }
        table td,table th {
            border: 2px solid #cad9ea;
            color: #666;
            height: 30px;
            padding: 5px 105px;
        }
        table thead th {
            background-color: #CCE8EB;
            font-size: 15px;
        }
        table tr:nth-child(odd) {
            background-color: #fff;
        }
        table tr:nth-child(even) {
            background-color: #F5FAFA;
        }

        .rule_info {
            width: 100%;
            /*background-color: green;*/
            text-align: center;
            padding: 20px;
            color: black;
            margin-top: 150px;
        }
        .rule_info input {
            width: 45px;
            height: 20px;
            margin: 0 5px;
            padding: 5px;
            font-size: 18px;
            text-align: center;
        }
        .rule_info div {
            font-size: 20px;
            margin: 10px 0;
        }
        .rule_sure {
            width: 100%;
            margin-top: 20px;
            /*background-color: green;*/
            text-align: center;
            padding: 20px;
        }
        .rule_sure button{
            width: 100px;
            height: 30px;
            margin-right: 20px;
            font-size: 20px;
            line-height: 30px;
        }

        .notice {
        text-align: center;
        font-size: 18px;
        }
        .title {
        margin-bottom: 20px;
        }
        .title input {
        height: 25px;
        padding: 5px;
        width: 850px;
        font-size: 18px;
        font-weight: 400;
        }
        .content textArea {
        outline: none;
        resize: none;
        width: 850px;
        height: 500px;
        padding: 5px;
        font-size: 18px;
        font-family: '微软雅黑', serif;
        border: none;
        }
        .notice_sure button {
        font-size: 18px;
        width: 80px;
        height: 30px;
        line-height: 30px;
        margin-top: 20px;
        }
        .copyright {
            text-align: center;
            line-height: 20px;
            margin-top: 10px;
        }
    </style>

    <script type="text/javascript">
        window.onload = function() {
            var left = document.querySelector('.left');
            var lis = left.querySelectorAll('li');
            var rights = document.querySelectorAll('.right');
            for (var i=0;i<lis.length;i++) {
                lis[i].setAttribute('index',i);
                lis[i].onclick = function() {
                    for (var i=0;i<lis.length;i++) {
                        lis[i].className = '';
                    }
                    this.className = 'current';

                    var index = this.getAttribute('index');
                    for (var i=0;i<rights.length;i++) {
                        rights[i].style.display = 'none';
                    }
                    rights[index].style.display = 'block';
                }
            }

            //绑定事件
            var startPhone = document.querySelector('.start_phone');
            var startNumber = document.querySelector('.start_number');
            var startBtn = document.querySelector('.start_btn');
            startBtn.onclick = function () {
                var phone = startPhone.value;
                var number = startNumber.value;

                //1.创建核心对象
                let xhr = new XMLHttpRequest();

                //2.注册回调函数
                xhr.onreadystatechange = function () {
                    if (this.readyState == 4) {
                        if (this.status == 200) {
                            startPhone.value = '';
                            startNumber.value = '';
                            var result = this.responseText;
                            if (result == 1) {
                                alert("入场登记成功！");
                            } else {
                                alert("车位已满，入场登录失败！");
                            }
                        } else {
                            alert(this.status)
                        }
                    }
                }

                //3.开启通道
                xhr.open("POST","<%=request.getContextPath()%>/AddParkingServlet",true);

                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                xhr.send("phone="+phone+"&number="+number);
            }

            var endNumber = document.querySelector('.end_number');
            var endBtn = document.querySelector('.end_btn');
            endBtn.onclick = function () {
                var number = endNumber.value;
                //1.创建核心对象
                let xhr = new XMLHttpRequest();
                //2.注册回调函数
                xhr.onreadystatechange = function () {
                    if (this.readyState == 4) {
                        if (this.status == 200) {
                            var info = this.responseText;
                            var infos = info.split(",");
                            var str;
                            if (infos[1]==1) {
                                str = '该用户为包月用户,';
                            } else {
                                str = '该用户为普通用户,'
                            }
                            alert(str+'停车费用为：'+infos[0]+'元');
                            endNumber.value = '';
                        } else {
                            alert(this.status)
                        }
                    }
                }
                //3.开启通道
                xhr.open("POST","<%=request.getContextPath()%>/DeleteParkingServlet",true);

                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                xhr.send("number="+number);
            }

            var display = document.querySelector(".play");
            var todayInBtn  = document.querySelector(".today_in_btn");
            todayInBtn.onclick = function () {
                //1.创建核心对象
                let xhr = new XMLHttpRequest();
                //2.注册回调函数
                xhr.onreadystatechange = function () {
                    if (this.readyState == 4) {
                        if (this.status == 200) {
                            var todayList = JSON.parse(this.responseText);
                            var html ='<table>\n' +
                                '                    <thead>\n' +
                                '                    <th>序号</th>\n' +
                                '                    <th>车牌号</th>\n' +
                                '                    <th>驶入时间</th>\n' +
                                '                    </thead>\n';
                            for (var i=0;i<todayList.length;i++) {
                                var today = todayList[i];
                                html += '<tr>';
                                html += "<td>"+(i+1)+"</td>"
                                html += "<td>"+today.carNumber+"</td>"
                                html += "<td>"+today.startTime+"</td>"
                                html += '</tr>';
                            }
                            display.innerHTML = html+='</table>';
                            alert('共查询到'+todayList.length+'条数据');
                        } else {
                            alert(this.status)
                        }
                    }
                }

                //3.开启通道
                xhr.open("GET","<%=request.getContextPath()%>/SelectTodayInServlet",true);

                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                xhr.send();
            }

            var todayOutBtn = document.querySelector(".today_out_btn");
            todayOutBtn.onclick = function () {
                //1.创建核心对象
                let xhr = new XMLHttpRequest();
                //2.注册回调函数
                xhr.onreadystatechange = function () {
                    if (this.readyState == 4) {
                        if (this.status == 200) {
                            var todayList = JSON.parse(this.responseText);
                            var html ='<table>\n' +
                                '                    <thead>\n' +
                                '                    <th>序号</th>\n' +
                                '                    <th>车牌号</th>\n' +
                                '                    <th>驶出时间</th>\n' +
                                '                    </thead>\n';
                            for (var i=0;i<todayList.length;i++) {
                                var today = todayList[i];
                                html += '<tr>';
                                html += "<td>"+(i+1)+"</td>"
                                html += "<td>"+today.carNumber+"</td>"
                                html += "<td>"+today.endTime+"</td>"
                                html += '</tr>';
                            }
                            display.innerHTML = html+='</table>';
                            alert('共查询到'+todayList.length+'条数据');
                        } else {
                            alert(this.status)
                        }
                    }
                }

                //3.开启通道
                xhr.open("GET","<%=request.getContextPath()%>/SelectTodayOutServlet",true);
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                xhr.send();
            }

            var dateIn = document.querySelector(".date_in");
            var oneDayInBtn = document.querySelector(".one_date_in_btn");
            oneDayInBtn.onclick = function () {
                if (dateIn.value == '') {
                    alert("请选择日期")
                } else {
                    //1.创建核心对象
                    let xhr = new XMLHttpRequest();
                    //2.注册回调函数
                    xhr.onreadystatechange = function () {
                        if (this.readyState == 4) {
                            if (this.status == 200) {
                                var todayList = JSON.parse(this.responseText);
                                var html ='<table>\n' +
                                    '                    <thead>\n' +
                                    '                    <th>序号</th>\n' +
                                    '                    <th>车牌号</th>\n' +
                                    '                    <th>驶入时间</th>\n' +
                                    '                    </thead>\n';
                                for (var i=0;i<todayList.length;i++) {
                                    var today = todayList[i];
                                    html += '<tr>';
                                    html += "<td>"+(i+1)+"</td>"
                                    html += "<td>"+today.carNumber+"</td>"
                                    html += "<td>"+today.startTime+"</td>"
                                    html += '</tr>';
                                }
                                display.innerHTML = html+='</table>';
                                alert('共查询到'+todayList.length+'条数据');
                            } else {
                                alert(this.status)
                            }
                        }
                    }
                    //3.开启通道
                    xhr.open("POST","<%=request.getContextPath()%>/SelectOneTodayInServlet",true);
                    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                    xhr.send("date="+dateIn.value);
                }
            }

            var dateOut = document.querySelector(".date_out");
            var oneDayOutBtn = document.querySelector(".one_date_out_btn");
            oneDayOutBtn.onclick = function () {
                if (dateOut.value == '') {
                    alert("请选择日期")
                } else {
                    //1.创建核心对象
                    let xhr = new XMLHttpRequest();
                    //2.注册回调函数
                    xhr.onreadystatechange = function () {
                        if (this.readyState == 4) {
                            if (this.status == 200) {
                                var todayList = JSON.parse(this.responseText);
                                var html = '<table>\n' +
                                    '                    <thead>\n' +
                                    '                    <th>序号</th>\n' +
                                    '                    <th>车牌号</th>\n' +
                                    '                    <th>驶出时间</th>\n' +
                                    '                    </thead>\n';
                                for (var i = 0; i < todayList.length; i++) {
                                    var today = todayList[i];
                                    html += '<tr>';
                                    html += "<td>" + (i + 1) + "</td>"
                                    html += "<td>" + today.carNumber + "</td>"
                                    html += "<td>" + today.endTime + "</td>"
                                    html += '</tr>';
                                }
                                display.innerHTML = html += '</table>';
                                alert('共查询到' + todayList.length + '条数据');
                            } else {
                                alert(this.status)
                            }
                        }
                    }
                    //3.开启通道
                    xhr.open("POST", "<%=request.getContextPath()%>/SelectOneTodayOutServlet", true);
                    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                    xhr.send("date=" + dateOut.value);
                }
            }

            var dateInStart = document.querySelector(".date_in_start");
            var dateInEnd = document.querySelector(".date_in_end");
            var twoDateInBtn = document.querySelector(".two_date_in_btn");
            twoDateInBtn.onclick = function () {
                if (dateInStart.value==''||dateInEnd.value=='') {
                    alert("请选择日期");
                } else {
                    //1.创建核心对象
                    let xhr = new XMLHttpRequest();
                    //2.注册回调函数
                    xhr.onreadystatechange = function () {
                        if (this.readyState == 4) {
                            if (this.status == 200) {
                                var todayList = JSON.parse(this.responseText);
                                var html = '<table>\n' +
                                    '                    <thead>\n' +
                                    '                    <th>序号</th>\n' +
                                    '                    <th>车牌号</th>\n' +
                                    '                    <th>驶入时间</th>\n' +
                                    '                    </thead>\n';
                                for (var i = 0; i < todayList.length; i++) {
                                    var today = todayList[i];
                                    html += '<tr>';
                                    html += "<td>" + (i + 1) + "</td>"
                                    html += "<td>" + today.carNumber + "</td>"
                                    html += "<td>" + today.startTime + "</td>"
                                    html += '</tr>';
                                }
                                display.innerHTML = html += '</table>';
                                alert('共查询到' + todayList.length + '条数据');
                            } else {
                                alert(this.status)
                            }
                        }
                    }
                    //3.开启通道
                    xhr.open("POST", "<%=request.getContextPath()%>/SelectTwoTodayInServlet", true);
                    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                    xhr.send("startDate=" + dateInStart.value+"&endDate="+dateInEnd.value);
                }
            }

            var dateOutStart = document.querySelector(".date_out_start");
            var dateOutEnd = document.querySelector(".date_out_end");
            var twoDateOutBtn = document.querySelector(".two_date_out_btn");
            twoDateOutBtn.onclick = function () {
                if (dateOutStart.value==''||dateOutEnd.value=='') {
                    alert("请选择日期");
                } else {
                    //1.创建核心对象
                    let xhr = new XMLHttpRequest();
                    //2.注册回调函数
                    xhr.onreadystatechange = function () {
                        if (this.readyState == 4) {
                            if (this.status == 200) {
                                var todayList = JSON.parse(this.responseText);
                                var html = '<table>\n' +
                                    '                    <thead>\n' +
                                    '                    <th>序号</th>\n' +
                                    '                    <th>车牌号</th>\n' +
                                    '                    <th>驶出时间</th>\n' +
                                    '                    </thead>\n';
                                for (var i = 0; i < todayList.length; i++) {
                                    var today = todayList[i];
                                    html += '<tr>';
                                    html += "<td>" + (i + 1) + "</td>"
                                    html += "<td>" + today.carNumber + "</td>"
                                    html += "<td>" + today.endTime + "</td>"
                                    html += '</tr>';
                                }
                                display.innerHTML = html += '</table>';
                                alert('共查询到' + todayList.length + '条数据');
                            } else {
                                alert(this.status)
                            }
                        }
                    }
                    //3.开启通道
                    xhr.open("POST", "<%=request.getContextPath()%>/SelectTwoTodayOutServlet", true);
                    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                    xhr.send("startDate=" + dateOutStart.value+"&endDate="+dateOutEnd.value);
                }
            }

            var checkPrice = document.querySelector(".checkPrice");
            var modifyPrice = document.querySelector(".modifyPrice");

            var freeTime = document.querySelector(".freeTime");
            var costTime = document.querySelector(".costTime");
            var perCost = document.querySelector(".perCost");
            var dayCost = document.querySelector(".dayCost");
            var monthCost = document.querySelector(".monthCost");
            checkPrice.onclick = function () {
                //1.创建核心对象
                let xhr = new XMLHttpRequest();
                //2.注册回调函数
                xhr.onreadystatechange = function () {
                    if (this.readyState == 4) {
                        if (this.status == 200) {
                            var str = JSON.parse(this.responseText);
                            freeTime.value = str.freeTime;
                            costTime.value = str.costTime;
                            perCost.value = str.perCost;
                            dayCost.value = str.dayCost;
                            monthCost.value = str.monthCost;
                            alert("查询成功");
                        } else {
                            alert(this.status)
                        }
                    }
                }
                //3.开启通道
                xhr.open("GET", "<%=request.getContextPath()%>/SelectRuleServlet", true);
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xhr.send();
            }
            modifyPrice.onclick = function () {
                var choice = confirm("确认修改嘛？");
                if (choice==true) {
                    //1.创建核心对象
                    let xhr = new XMLHttpRequest();
                    //2.注册回调函数
                    xhr.onreadystatechange = function () {
                        if (this.readyState == 4) {
                            if (this.status == 200){
                                alert("修改成功");
                            } else {
                                alert(this.status)
                            }
                        }
                    }
                    //3.开启通道
                    xhr.open("POST", "<%=request.getContextPath()%>/UpdateRuleServlet", true);
                    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                    xhr.send("freeTime="+freeTime.value+"&costTime="+costTime.value+"&perCost="+perCost.value+
                        "&dayCost="+dayCost.value+"&monthCost="+monthCost.value);
                }
        }

            var noticeTitle = document.querySelector(".notice_title");
            var noticeContent = document.querySelector(".notice_content");
            document.querySelector(".notice_btn").onclick = function () {
                var title = noticeTitle.value;
                var content = noticeContent.value;
                var choice = confirm("确认发布吗？");
                if (choice) {
                    //1.创建核心对象
                    let xhr = new XMLHttpRequest();
                    //2.注册回调函数
                    xhr.onreadystatechange = function () {
                        if (this.readyState == 4) {
                            if (this.status == 200){
                                alert("发布成功");
                                noticeContent.value='';
                                noticeTitle.value='';
                            } else {
                                alert(this.status)
                            }
                        }
                    }
                    //3.开启通道
                    xhr.open("POST", "<%=request.getContextPath()%>/InsertNoticeServlet", true);
                    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                    xhr.send("title="+title+"&content="+content);
                }

            }
}
    </script>
</head>
<body>
<div class="main">
    <div class="top">
        <div><h2>祥升停车场</h2></div>
    </div>
    <div class="bottom clearfix">
        <div class="left">
            <ul>
                <li class="current">记录结算停车服务</li>
                <li>查询信息</li>
                <li>修改停车收费标准</li>
                <li>发布通知</li>
            </ul>
        </div>
        <%--记录结算停车服务--%>
        <div class="right" style="display: block;">
            <div class="start">
                <h2>车辆驶入登记</h2>
                <div class="start_info">
                    <div>手机号：<input type="text" class="start_phone"></div>
                    <div>车牌号：<input type="text" spellcheck="false" class="start_number"></div>
                    <div><Button class="start_btn">登记</Button></div>
                </div>
            </div>
            <div class="end">
                <h2>车辆驶出登记</h2>
                <div class="end_info">
                    <div>车牌号：<input type="text" spellcheck="false" class="end_number"></div>
                    <div><Button class="end_btn">登记</Button></div>
                </div>
            </div>
        </div>
        <%--查询信息--%>
        <div class="right ">
            <div class="factor">
                <div class="factor_left">
                    <div>查看今天驶入车辆<Button class="today_in_btn">查看</Button></div>
                    <div>查看<input type="date" class="date_in">驶入车辆<Button class="one_date_in_btn">查看</Button></div>
                    <div>查看<input type="date" class="date_in_start">到<input type="date" class="date_in_end">驶入车辆
                        <Button class="two_date_in_btn">查看</Button></div>
                </div>
                <div class="factor_right">
                    <div>查看今天驶出车辆<Button class="today_out_btn">查看</Button></div>
                    <div>查看<input type="date" class="date_out">驶出车辆<Button class="one_date_out_btn">查看</Button></div>
                    <div>查看<input type="date" class="date_out_start">到<input type="date" class="date_out_end">驶出车辆<Button class="two_date_out_btn">查看</Button></div>
                </div>
            </div>
            <div class="play">

            </div>
        </div>
        <%--修改停车规则--%>
        <div class="right">
            <div class="rule_info">
                <div>
                    前<input type="text" class="freeTime">小时免费
                </div>
                <div>
                    以后每<input type="text" class="costTime">
                    小时<input type="text" class="perCost">元
                </div>
                <div>
                    每天上限<input type="text" class="dayCost">元
                </div>
                <div>
                    包月费用<input type="text" class="monthCost">元
                </div>
            </div>
            <div class="rule_sure">
                <button class="checkPrice">查询价格</button>
                <button class="modifyPrice">修改价格</button>
            </div>
        </div>

        <div class="right">
            <div class="notice">
                <div class="title">
                    <div><input type="text" placeholder="通知标题" spellcheck="false" class="notice_title"></div>
                </div>
                <div class="content">
                    <div><textArea cols="30" rows="30" placeholder="通知内容" spellcheck="false" class="notice_content"></textArea></div>
                </div>
                <div class="notice_sure">
                    <button class="notice_btn">发布</button>
                </div>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="copyright">
            祥升停车场是一家专注于服务小型汽车的停车场，致力于打造小型汽车停车服务的新天地。
            地址：河南省郑州市高新区莲花街100号 邮编：100096 电话：400-618-4000<br>
            豫ICP备08001421号豫公网安备110108007702
        </div>
    </div>

</div>
</body>
</html>
